<template>
  <el-card>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="菜单名称" prop="title" required>
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentId" required>
        <el-select v-model.number="ruleForm.parentId" placeholder="请选择">
          <el-option :value="0" label="无上级菜单"></el-option>
          <el-option
            v-for="item in cardData.parentList"
            :label="item.title ? item.title : item.id"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="前端名称" prop="name" required>
        <el-input v-model="ruleForm.name" :disabled="cardData.disabled" />
      </el-form-item>
      <el-form-item label="前端图标" prop="icon">
        <el-input v-model="ruleForm.icon" :disabled="cardData.disabled" />
      </el-form-item>
      <el-form-item label="是否显示" prop="hidden">
        <el-radio-group v-model.number="ruleForm.hidden" class="ml-4">
          <el-radio :label="0" size="large">是</el-radio>
          <el-radio :label="1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="ruleForm.sort" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watchEffect } from "vue";
import {
  ElMessage,
  ElTabPane,
  type FormInstance,
  type FormRules,
} from "element-plus";
import { menu } from "../../json/request/api";
import { RouteParams, useRoute, useRouter } from "vue-router";
import type { MenuData } from "../../json/request/UmsMenuController/index";
let router = useRouter();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  title: "",
  parentId: "",
  name: "",
  icon: "",
  hidden: 1,
  sort: "",
});
let cardData = reactive({
  parentList: {} as any,
  rowData: null as any,
  disabled: false,
});
let originalData: MenuData;
let route = useRoute();
watchEffect(async () => {
  if (route.fullPath === "/ums/addMenu") {
  } else if (route.query.id) {
    cardData.disabled = true;
    let res = await menu.getMenuData(Number(route.query.id));
    originalData = res;
    ruleForm.icon = res.icon;
    ruleForm.title = res.title;
    ruleForm.name = res.name;
    ruleForm.hidden = res.hidden;
    ruleForm.sort = res.sort;
    ruleForm.parentId = res.parentId;
  }
});
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  title: [{ required: true, message: "请输入前端名称", trigger: "blur" }],
  parentId: [{ required: true, message: "请选择父级", trigger: "blur" }],
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 提交修改或创建
      if (route.query.id) {
        // 修改menu
        menu
          .updateMenu(Number(route.query.id), {
            ...originalData,
            ...ruleForm,
          })
          .then(() => {
            ElMessage({
              message: "修改成功",
              type: "success",
            });
            router.push("/ums/menu");
          })
          .catch(() => {
            ElMessage({
              message: "修改失败",
              type: "error",
            });
          });
      } else {
        // 创建新menu
        menu
          .createMenu({
            ...ruleForm,
          })
          .then(() => {
            ElMessage({
              message: "新建成功",
              type: "success",
            });
            router.push("/ums/menu");
          })
          .catch(() => {
            ElMessage({
              message: "新建失败",
              type: "error",
            });
          });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 初始化数据
onMounted(async () => {
  let res = await menu.menuList({ parentId: 0, pageSize: 100 });
  cardData.parentList = res.list;
});
</script>
